import validate from "./jquery-validation-1.14.0/dist/jquery.validate";
import messages_zh from "./jquery-validation-1.14.0/dist/localization/messages_zh.js";
import public_scss from "./../sass/public.scss";
import register_scss from "./../sass/register.scss";
const layui=require("layui-layer");


$(function(){
    code_draw();
    // // 点击后刷新验证码
        $("#canvas").on('click', function() {
            code_draw();
        })
    // addMethod("规则名称","回调函数","消息提示")
        $("#reg").validate({
            rules:{
                uname:{
                    required:true,
                    rangelength:[6,16],
                },
                upwd:{
                    required:true,
                    rangelength:[6,16],
                },
                upwd2:{
                    equalTo:"#upwd",
                },
                utel:{
                    required:true,
                    minlength:[11],
                    maxlength:[11],
                }
            },
            messages:{
                uname:{
                    required:"请输入您的名字(必填)",
                    rangelength:"长度{0}-{1}之间",
                },
                upwd:{
                    required:"请输入您的密码(必填)",
                    rangelength:"长度{0}-{1}之间",
                },
                upwd2:{
                    equalTo:"2次密码不一致",
                },
                utel:{
                    required:"请输入您的电话号码",
                    minlength:"长度是11位",
                    maxlength:"手机号超过11位了",
                }
            },
            submitHandler:function(){
                // 将输入的内容转为大写，可通过这步进行大小写验证
                var val = $(".input-val").val().toLowerCase();
                // 获取生成验证码值
                var num = $('#canvas').attr('data-code');

                if (val == '') {
                    layer.msg('请输入验证码！',{icon:2});
                } else if (val == num) {
                    $(".input-val").val('');

                    console.log($("#reg").serialize())
                    $.ajax({
                        url:"http://10.41.151.78:8081/api/reg",
                        type:"post",
                        data:$("#reg").serialize(),
                        dataType:"json",
                    }).then(function(res){
                        console.log(res);
                        layer.msg(res.msg,{icon:res.status == 200 ? 1 : 2});

                        setInterval(function(){
                            window.location.href="./login.html";
                        },2000)

                            if(res.status != 200){
                                //draw(show_num);  //重新生成验证码
                            }
                    });
                    // layer.msg('提交成功！',{icon:1});

                } else {
                    layer.msg('验证码错误！请重新输入！',{icon:3});
                    $(".input-val").val('');
                    draw(show_num);
                }
                return false;
            }
        });
})

function code_draw() {
    var canvas_width = $("#canvas").width();
    var canvas_height = $("#canvas").height();
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    canvas.width = canvas_width;
    canvas.height = canvas_height;
    var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
    var aCode = sCode.split(",");
    var aLength = aCode.length;
    var value = [];
    for (var i = 0; i <= 3; i++) {
      var j = Math.floor(Math.random() * aLength);
      var deg = (Math.random() * 30 * Math.PI) / 180;
      var txt = aCode[j];
      value[i] = txt.toLowerCase();
      var x = 10 + i * 20;
      var y = 20 + Math.random() * 8;
      context.font = "bold 23px 微软雅黑";
      context.translate(x, y);
      context.rotate(deg);
      context.fillStyle = code_randomColor();
      context.fillText(txt, 0, 0);
      context.rotate(-deg);
      context.translate(-x, -y);
    }
    value = value.join("");
    $("#canvas").attr("data-code", value);
    for (var i = 0; i <= 5; i++) {
      context.strokeStyle = code_randomColor();
      context.beginPath();
      context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
      context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
      context.stroke();
    }
    for (var i = 0; i <= 30; i++) {
      context.strokeStyle = code_randomColor();
      context.beginPath();
      var x = Math.random() * canvas_width;
      var y = Math.random() * canvas_height;
      context.moveTo(x, y);
      context.lineTo(x + 1, y + 1);
      context.stroke();
    }
  }
  function code_randomColor() {
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return "rgb(" + r + "," + g + "," + b + ")";
  }